Ext.define('AmpleHarvest.views.topicmodel.cDisplayWindow',
{
		extend		: 'Ext.panel.Panel',
		alias		: 'widget.ampleharvest-views-topicmodel-cdisplaywindow',
		title		: '',
		requires	: [
		       		   'Ext.chart.*',
		       		   'AmpleHarvest.objects.topicmodel.cChartBar',
		       		   'AmpleHarvest.objects.topicmodel.cChartGauge'
		       		   ],
        layout: {
            type: 'hbox',
            align: 'stretch'
        },

    	listeners		:
    	{
    		loadData	: function(obj_data)
    		{
    			Ext.destroy(this.m_obj_bar);
    			Ext.destroy(this.m_obj_gauge);
    			var arr_holder = obj_data.data.data.topics[obj_data.passthrough.value].terms;
    			var int_gauge = 0;
    			var int_gageMax = 0;
    			var arr_toolbar = [];
    			
    			var bool_firstload = this.m_obj_Toolbar.items.length == 0 ? true : false;

    			if(bool_firstload)
    			{
    				for( var v in obj_data.data.data.topics)
        			{
    					var int_displayval = parseFloat(v) + 1
	    				this.m_obj_modelDropdown.add({
	    		            text  : 'Topic Model:'+int_displayval,
	    		            tooltip  : "Topic Models",
	    		            iconCls  : "menu-search-file-icon",
	    		            targetVal: v,
	    		            handler  : function()
	    		            {
	    		            	this.up('ampleharvest-views-topicmodel-cdisplaywindow').getEl().mask('loading...');;
	    		            	this.up('ampleharvest-views-topicmodel-cdisplaywindow').util_metrics.get_json(
	    		        				{ 
	    		        					restPath 	: this.up('ampleharvest-views-topicmodel-cdisplaywindow').siteLink,
	    		        					threshold	: 0.001,
	    		        					maxtopics	: 20,
	    		        					maxterms	: 20,
	    		        					passthrough	: {
	    		        							value	: this.targetVal
	    		        						}
	    		        				}, this.up('ampleharvest-views-topicmodel-cdisplaywindow'));
	    		            }
	    		         });
	    			}	
	    				
	    			this.m_obj_Toolbar.add({
						text	: 'Topic Models',
						iconCls	: "menu-search-icon",
						tooltip	: "Search Data",
						menu	: this.m_obj_modelDropdown
	
					});
	    			this.m_obj_Toolbar.add({
	    				text	: 'Return to '+this.siteURL,
	    				xtype	: 'button',
	    				handler	: function()
	    				{
	    					
	    					var obj_window = this.up('ampleharvest-views-topicmodel-cdisplaywindow');
	    					m_obj_AmpleHarvest_ViewPort
	    					.fireEvent(
	    							AmpleHarvest.eventHandler.cWindowEvents.C_STR_EVENT_METRICS_SITE_DETAIL,
	    							obj_window.parentLink
	    					);
	    				}
	    			});
	    			this.addDocked(this.m_obj_Toolbar, 'top');
    			}
    			
    			for( var v in arr_holder)
    			{
    				int_gauge = int_gauge + parseFloat(arr_holder[v].probability);
    				int_gageMax++;
    			}
    			this.m_obj_bar = Ext.create('AmpleHarvest.objects.topicmodel.cChartBar',
            			{
            				flex	: 2,
            				store		: Ext.create('Ext.data.JsonStore', {
            				    fields: ['word', 'probability'],
            				    data: arr_holder
            				})
            			});
//    			this.m_obj_bar.getStore().loadData(arr_holder);
    			this.add(this.m_obj_bar);
    			// TODO: find out why passing max and steps is not causing proper render
//    			this.m_obj_gauge.set_steps(int_gageMax);
    			this.m_obj_gauge = Ext.create('AmpleHarvest.objects.topicmodel.cChartGauge',
            			{
            				flex	: 1,
            				axes: [{
            			        type: 'gauge',
            			        position: 'gauge',
            			        minimum: 0,
            			        maximum: int_gageMax * 10,
            			        steps: 10,
            			        margin: 10
            			    }],
            			});
    			this.m_obj_gauge.getStore().loadData([{ 'value' : int_gauge}]);
    			this.add(this.m_obj_gauge);
    			if(this.getEl())
    			{
    				this.getEl().unmask();
    			}
    			
    		}
    	},
        
    	initComponent	: function()
        {
//    		try this with the topic models:
//    		/topicmodel?threshold=0.05&maxtopics=10&maxterms=2
//    				not sure if it would be easier to do the filtering on your side or mine

    		this.dockedItems = [];
    		
    		this.m_obj_Toolbar = Ext.create("Ext.toolbar.Toolbar");
    		this.m_obj_modelDropdown = Ext.create("Ext.menu.Menu",
					{
						text		: 'Topic Model List',
						iconCls		: "menu-metric-icon",
						hideOnClick	: false,
						items		: []
					});
    		
    		this.util_metrics = Ext.create('AmpleHarvest.objects.metrics.util.cMetricsUtils');
    		this.util_metrics.get_json(
    				{ 
    					restPath 	: this.siteLink,
    					threshold	: 0.001,
    					maxtopics	: 20,
    					maxterms	: 20,
    					passthrough	:  {
							value	: 0
						}
    				}, this);
        	
    		
    		
//        	this.m_obj_bar = Ext.create('AmpleHarvest.objects.topicmodel.cChartBar',
//        			{
//        				flex	: 2
//        			});
//        	this.m_obj_gauge = Ext.create('AmpleHarvest.objects.topicmodel.cChartGauge',
//        			{
//        				flex	: 1
//        			});
        	
        	this.callParent();
        	this.title = this.siteURL;
        }
    }); 